﻿@page "/Grid"

@using FluentUI.Demo.Shared.Pages.Grid.Examples;
@using Microsoft.FluentUI.AspNetCore.Components;

<PageTitle>@App.PageTitle("Grid")</PageTitle>

<h1>Grid</h1>

<p>
    The grid component helps keeping layout consistent across various screen resolutions and sizes. <code>FluentGrid</code> comes with a 12-point grid system and contains 5 types of breakpoints that are used for specific screen sizes.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(GridDefault)" />

<DemoSection Title="No breakpoints" Component="@typeof(GridMessage)">
    <Description>
        <p>You can resize the panel using the slider in the bottom right-hand corner.</p>
        <p>
            If no <strong>Breakpoints</strong> or if <code>xs="0"</code> is defined for a <code>FluentGridItem</code> component,
            this style will be applied: <code>flex: 1; max-width: fit-content;</code>.<br />
            In this example, the first item (the message) cannot be lower than 200px <code>min-width: 200px;</code>.
            To avoid that, the second item (the buttons) will be moved to the next line.
        </p>
    </Description>
</DemoSection>

<h2 id="breakpoints">Breakpoints</h2>

<p>
    Breakpoints help you control your layout based on windows size:

    <FluentDataGrid Items="@AllBreakpoints" GridTemplateColumns="20fr 10fr 50fr 20fr">
        <PropertyColumn Property="x => x.Device" />
        <TemplateColumn Title="Code">
            <code style="font-weight: bold;">@context.Code</code>
        </TemplateColumn>
        <PropertyColumn Property="x => x.Type" />
        <PropertyColumn Property="x => x.Range" />
    </FluentDataGrid>
</p>

<h2 id="hidden">Hiding elements</h2>

<p>
    For faster, mobile-friendly development, use responsive display classes to show and hide elements according to device.
    Avoid creating entirely different versions of the same site, but instead hide elements reactively for each screen size.
</p>
<p>
    To hide elements, simply use the <strong>HiddenWhen</strong> attribute by selecting one of the following values or combining them with
    the <code>|</code> operator (see <a href="https://learn.microsoft.com/en-us/dotnet/api/system.flagsattribute" target="_blank">Enumeration flags</a>)
</p>
<p>
    To display an element only on a given range of screen sizes, you can combine a these values.
    e.g. <code>GridItemHidden.Md | GridItemHidden.Lg</code> will display the element for all screen sizes, except on medium and large devices.
</p>
<p>
    <b>AdaptiveRendering</b> allows for not generating HTML code in a <b>FluentGridItem</b> based on the value of the <code>HiddenWhen</code> parameter.
    In other words, when <code>AdaptiveRendering=false</code> (default), the content of the <b>FluentGridItem</b> is simply hidden by CSS styles,
    whereas if <code>AdaptiveRendering=true</code>, the content of the <b>FluentGridItem</b> is not rendered by Blazor.
    This allows for fine-grained control over when HTML is generated or not, for example in a case where rendering the grid item takes
    a lot of time or leads to a lot of data being transferred.
</p>
<p>
    <FluentDataGrid Items="@AllHiddenValues" GridTemplateColumns="28fr 12fr 12fr 12fr 12fr 12fr 12fr" ItemKey="@(i => new Random().Next())">
        <TemplateColumn Align="Align.Start" Style="align-self: unset;">
            <HeaderCellItemTemplate>GridItemHidden</HeaderCellItemTemplate>
            <ChildContent>
                <code>@context.Name</code>
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>X Small<br /><div class="size-label">&lt; 600px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Xs ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>Small<br /><div class="size-label">600px - 959px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Sm ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>Medium<br /><div class="size-label">960px - 1279px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Md ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>Large<br /><div class="size-label">1280px - 1919px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Lg ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>X Large<br /><div class="size-label">1920px - 2559px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Xl ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
        <TemplateColumn Align="Align.Center" Style="align-self: unset;">
            <HeaderCellItemTemplate><div>XX Large<br /><div class="size-label">&ge; 2560px</div></div></HeaderCellItemTemplate>
            <ChildContent>
                <FluentIcon Value="@(context.Xxl ? CheckedIcon : UncheckedIcon)" />
            </ChildContent>
        </TemplateColumn>
    </FluentDataGrid>
</p>

<style>
    .size-label {
        font-size: x-small;
        text-wrap: wrap;
        font-weight: normal;
    }
</style>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentGrid)" />

<ApiDocumentation Component="typeof(FluentGridItem)" />


@code
{
    public Icon CheckedIcon = new Icons.Regular.Size20.CheckboxChecked().WithColor(Color.Success);
    public Icon UncheckedIcon = new Icons.Regular.Size20.Prohibited().WithColor(Color.Disabled);
    public record Breakpoint(string Device, string Code, string Type, string Range);
    public record HiddenValue(string Name, bool Xs, bool Sm, bool Md, bool Lg, bool Xl, bool Xxl);

    IQueryable<Breakpoint> AllBreakpoints = new List<Breakpoint>()
    {
        new ( "Extra Small", "xs", "Small to large phone", "< 600px" ),
        new ( "Small", "sm", "Small to medium tablet", "< 960px" ),
        new ( "Medium", "md", "Large tablet to laptop", "< 1280px" ),
        new ( "Large", "lg", "Desktop", "< 1920px" ),
        new ( "Extra Large", "xl", "HD and 4k", "< 2560px" ),
        new ( "Extra Extra Large", "xxl", "4k+ and ultra-wide", ">= 2560px" ),
    }.AsQueryable();

    IQueryable<HiddenValue> AllHiddenValues = new List<HiddenValue>()
    {
        GetHiddenValue("None"),
        GetHiddenValue("Xs"),
        GetHiddenValue("Sm"),
        GetHiddenValue("Md"),
        GetHiddenValue("Lg"),
        GetHiddenValue("Xl"),
        GetHiddenValue("Xxl"),
        GetHiddenValue("XsAndDown"),
        GetHiddenValue("SmAndDown"),
        GetHiddenValue("MdAndDown"),
        GetHiddenValue("LgAndDown"),
        GetHiddenValue("XlAndDown"),
        GetHiddenValue("XxlAndDown"),
        GetHiddenValue("XsAndUp"),
        GetHiddenValue("SmAndUp"),
        GetHiddenValue("MdAndUp"),
        GetHiddenValue("LgAndUp"),
        GetHiddenValue("XlAndUp"),
        GetHiddenValue("XxlAndUp"),
    }.AsQueryable();

    private static HiddenValue GetHiddenValue(string name)
    {
        var item = Enum.Parse<GridItemHidden>(name);

        return new(
            name,
            (item & GridItemHidden.Xs) == GridItemHidden.Xs,
            (item & GridItemHidden.Sm) == GridItemHidden.Sm,
            (item & GridItemHidden.Md) == GridItemHidden.Md,
            (item & GridItemHidden.Lg) == GridItemHidden.Lg,
            (item & GridItemHidden.Xl) == GridItemHidden.Xl,
            (item & GridItemHidden.Xxl) == GridItemHidden.Xxl);
    }
}
